<article class="component" id="modal">
  <h2 class="component-title">Modal</h2>
  <p class="component-description">Modal 是从App的主要内容区域上弹出的一小块内容块,是“临时视图”的一部分。</p>
  <p class="component-description">多个Modal类组件（包括toast）同时被呼起时，会按先后顺序被缓存在队列中，前一个modal关闭后，下一个modal才会打开</p>
  <p class="component-description">Modals 可以只用JavaScript打开。所以让我们来看看使用modals的相关APP方法</p>

  <!-- 
  <h3 class="component-title">预定义的 Modals</h3>
  <ul>
    <li>1.注意，如果你没有指定预定义的modal标题，它讲使用默认的标题，这个可以在App 初始化时，通过传递 modalTitle 参数改变。</li>
    <li>2.预定义modals的按钮文本(如 "Ok" 和 "Cancel") 也可以在 App 初始化时，通过传递 modalButtonOk 和 modalButtonCancel 参数改变。</li>
  </ul>
  -->
  <p class="component-description">首先，让我们看看已经预定义的最常用的modal:</p>

  <h3 class="component-title">Alert</h3>
  <p class="component-description">我们需要调用以下任一一种App方法来打开Alert modal ：<code>$.alert(text, [title, callbackOk])</code> </br>或者</br> <code>$.alert(text, [callbackOk])</code></p>

  <ul>
    <li><code>text</code> - string. Alert文本</li>
    <li><code>title</code> - string. Optional. Alert modal 标题</li>
    <li><code>callbackOk</code>  - function. Optional.在Alert modal下，当用户点击“Ok”按钮时，回调函数将被执行。</li>
  </ul>
  <p class="component-description">该方法返回动态创建的modal的HTML元素。</p>
  <div class="component-example component-example-fullbleed">
    <div class="">
      <div class="content-block">
        <p><a href="" class="alert-text">Alert With Text</a></p>
        <p><a href="" class="alert-text-title">Alert With Text and Title</a></p>
        <p><a href="" class="alert-text-title-callback">Alert With Text and Title and Callback</a></p>
        <p><a href="" class="alert-text-callback">Alert With Text and Callback</a></p>
      </div>
      <script type="text/javascript">
        $(function(){
          //只在本站例子中需要加这行改变容器，默认document.body
           $.modal.prototype.defaults.modalContainer = ".device-content";
           $(document).on('click','.alert-text',function () {
              $.alert('Here goes alert text haha');
           });

          $(document).on('click','.alert-text-title', function () {
              $.alert('Here goes alert text', 'Custom Title!');
          });

          $(document).on('click', '.alert-text-title-callback',function () {
              $.alert('Here goes alert text', 'Custom Title!', function () {
                  $.alert('Button clicked!')
              });
          });

          $(document).on('click', '.alert-text-callback',function () {
              $.alert('Here goes alert text', function () {
                  $.alert('Button clicked!')
              });
          });
        })

      </script>

    </div>
  </div>

  {% highlight html %}
  <header class="bar bar-nav">
    <h1 class="title">Alert</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="alert-text">Alert With Text</a></p>
      <p><a href="#" class="alert-text-title">Alert With Text and Title</a></p>
      <p><a href="#" class="alert-text-title-callback">Alert With Text and Title and Callback</a></p>
      <p><a href="#" class="alert-text-callback">Alert With Text and Callback</a></p>
    </div>
  </div>
   ...
  {% endhighlight %}
  {% highlight js %}
  $(function(){
     $(document).on('click','.alert-text',function () {
        $.alert('Here goes alert text');
     });

    $(document).on('click','.alert-text-title', function () {
        $.alert('Here goes alert text', 'Custom Title!');
    });

    $(document).on('click', '.alert-text-title-callback',function () {
        $.alert('Here goes alert text', 'Custom Title!', function () {
            $.alert('Button clicked!')
        });
    });

    $(document).on('click', '.alert-text-callback',function () {
        $.alert('Here goes alert text', function () {
            $.alert('Button clicked!')
        });
    });
  })

  {% endhighlight %}
</article>

<article class="component active">
  <h3 class="component-title">Confirm</h3>
  <p class="component-description">Confirm modal 经常在需要确认一些行为时被使用. 打开Alert modal同样也需要调用以下任一一种App方法：<code>$.confirm(text, [title, callbackOk, callbackCancel])</code></br>或者 </br>
 <code>$.confirm(text, [callbackOk, callbackCancel])</code></p>
  <ul>
    <li><code>text  - string. Confirm 文本</code></li>
    <li><code>title - string. Optional</code>. Confirm modal 标题</li>
    <li><scode>callbackOk  - function. Optional</code>. 在 Confirm modal下，当用户点击“Ok”按钮时，回调函数将被执行。(当用户确认操作）</li>
    <li><code>callbackCancel  - function. Optional</code>. 在 Confirm modal下，当用户点击“Cancel”按钮时，回调函数将被执行。(当用户不想进行操作)</li>
  </ul>
  <p class="component-description">该方法返回动态创建的modal的HTML元素。</p>
  <div class="component-example component-example-fullbleed">
    <div class="">
      <div class="content-block">
        <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
        <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
        <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
        <p><a href="#" class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p>
      </div>
      <script type="text/javascript">
        $(document).on('click','.confirm-ok', function () {
            $.confirm('Are you sure?', function () {
                $.alert('You clicked Ok button');
            });
        });

        $(document).on('click', '.confirm-ok-cancel',function () {
            $.confirm('Are you sure?',
              function () {
                $.alert('You clicked Ok button');
              },
              function () {
                $.alert('You clicked Cancel button');
              }
            );
        });
        $(document).on('click','.confirm-title-ok', function () {
            $.confirm('Are you sure?', 'Custom Title', function () {
                $.alert('You clicked Ok button');
            });
        });
        $(document).on('click','.confirm-title-ok-cancel', function () {
            $.confirm('Are you sure?', 'Custom Title',
              function () {
                $.alert('You clicked Ok button');
              },
              function () {
                $.alert('You clicked Cancel button');
              }
            );
        });

      </script>
    </div>
  </div>
  {% highlight html %}
  <header class="bar bar-nav">
    <h1 class="title">Confirm</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
      <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
      <p><a href="#" class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p>
    </div>
  </div>
  ...
  {% endhighlight %}
  {% highlight js %}
  $(document).on('click','.confirm-ok', function () {
      $.confirm('Are you sure?', function () {
          $.alert('You clicked Ok button');
      });
  });

  $(document).on('click', '.confirm-ok-cancel',function () {
      $.confirm('Are you sure?',
        function () {
          $.alert('You clicked Ok button');
        },
        function () {
          $.alert('You clicked Cancel button');
        }
      );
  });
  $(document).on('click','.confirm-title-ok', function () {
      $.confirm('Are you sure?', 'Custom Title', function () {
          $.alert('You clicked Ok button');
      });
  });
  $(document).on('click','.confirm-title-ok-cancel', function () {
      $.confirm('Are you sure?', 'Custom Title',
        function () {
          $.alert('You clicked Ok button');
        },
        function () {
          $.alert('You clicked Cancel button');
        }
      );
  });
  {% endhighlight %}
</article>

<article class="component active">
  <h3 class="component-title">Prompt</h3>
  <p class="component-description">Prompt modal 经常在需要从用户那里得到一些数据/答案时使用。打开 Prompt modal同样也需要调用以下任一一种App方法：<code>$.prompt(text, [title, callbackOk, callbackCancel])</code></br>或者</br>
 <code>$.prompt(text, [callbackOk, callbackCancel])</code></p>
  <ul>
    <li><code>text - string</code>. Prompt 文本/问题</li>
    <li><code>title  - string</code>. Optional. Prompt modal 标题</li>
    <li><code>callbackOk  - function</code>. Optional. 在 Prompt modal下，当用户点击“Ok”按钮时，回调函数将被执行。回调函数的参数是输入框的值</li>
    <li><code>callbackCancel - function</code>. Optional. 在 Prompt modal下，当用户点击“Cancel”按钮时，回调函数将被执行。回调函数的参数是输入框的值</li>
  </ul>
  <p class="component-description">该方法返回动态创建的modal的HTML元素。</p>
  <div class="component-example component-example-fullbleed">
    <div class="">
      <div class="content-block">
        <p><a href="#" class="prompt-ok">Prompt with text and Ok callback</a></p>
        <p><a href="#" class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p>
        <p><a href="#" class="prompt-title-ok">Prompt with text, title and Ok callback</a></p>
        <p><a href="#" class="prompt-title-ok-cancel">Prompt with text, title, Ok and Cancel callback</a></p>
      </div>
      <script type="text/javascript">
        $(document).on('click','.prompt-ok', function () {
            $.prompt('What is your name?', function (value) {
                $.alert('Your name is "' + value + '". You clicked Ok button');
            });
        });

        $(document).on('click','.prompt-ok-cancel', function () {
            $.prompt('What is your name?',
              function (value) {
                $.alert('Your name is "' + value + '". You clicked Ok button');
              },
              function (value) {
                $.alert('Your name is "' + value + '". You clicked Cancel button');
              }
            );
        });
        $(document).on('click', '.prompt-title-ok',function () {
            $.prompt('What is your name?', 'Custom Title', function (value) {
                $.alert('Your name is "' + value + '". You clicked Ok button');
            });
        });
        $(document).on('click', '.prompt-title-ok-cancel',function () {
            $.prompt('What is your name?', 'Custom Title',
              function (value) {
                $.alert('Your name is "' + value + '". You clicked Ok button');
              },
              function (value) {
                $.alert('Your name is "' + value + '". You clicked Cancel button');
              }
            );
        });

      </script>
    </div>
  </div>
  {% highlight html %}
  <header class="bar bar-nav">
    <h1 class="title">Prompt</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="prompt-ok">Prompt with text and Ok callback</a></p>
      <p><a href="#" class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="prompt-title-ok">Prompt with text, title and Ok callback</a></p>
      <p><a href="#" class="prompt-title-ok-cancel">Prompt with text, title, Ok and Cancel callback</a></p>
    </div>
  </div>
  ...
  {% endhighlight %}
  {% highlight js %}
  $(document).on('click','.prompt-ok', function () {
      $.prompt('What is your name?', function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
      });
  });

  $(document).on('click','.prompt-ok-cancel', function () {
      $.prompt('What is your name?',
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
        },
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Cancel button');
        }
      );
  });
  $(document).on('click', '.prompt-title-ok',function () {
      $.prompt('What is your name?', 'Custom Title', function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
      });
  });
  $(document).on('click', '.prompt-title-ok-cancel',function () {
      $.prompt('What is your name?', 'Custom Title',
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
        },
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Cancel button');
        }
      );
  });
  {% endhighlight %}
</article>



<article class="component active">
  <h3 class="component-title">自定义Modals</h3>
  <p class="component-description">Ok, 所有的预定义modals都只是一些适用于特定的场景的方法. 让我们看看如何创建自定义的 modals: </p>
  <p class="component-description"><code>$.modal(parameters)</code> - 显示 custom modal </p>
  <ul>
    <li><code>parameters - object</code>. Modal 的 parameters/options对象</li>
  </ul>
  <p class="component-description">该方法返回动态创建的modal的HTML元素。 </p>
  <p class="component-description">这里有 Modal 的参数列表: </p>
  <table class="params-table">
    <thead>
      <tr>
        <th>参数</th>
        <th>类型</th>
        <th>默认值</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>title</td>
        <td>字符串</td>
        <td></td>
        <td>可选. Modal 标题 (可以是html字符串)</td>
      </tr>
      <tr>
        <td>text</td>
        <td>字符串</td>
        <td></td>
        <td>可选. Modal 文本 (可以是html字符串)</td>
      </tr>
      <tr>
        <td>afterText</td>
        <td>字符串</td>
        <td></td>
        <td>可选. 将被放在"text"后的文本 (可以是html字符串)</td>
      </tr>
      <tr>
        <td>buttons</td>
        <td>数组</td>
        <td></td>
        <td>可选. 按钮数组. 每个按钮应该被表示为带按钮参数的对象 (看下面)</td>
      </tr>
      <tr>
        <td>extraClass</td>
        <td>字符串</td>
        <td></td>
        <td>可选. 给modal的根节点<code>.modal</code>附加1或多个自定义class(如'bg-red','bg-blue share-type')，方便按需定制不同的modal样式。</td>
      </tr>
      <tr>
        <td>verticalButtons</td>
        <td>boolean</td>
        <td>false</td>
        <td>Optional. Set to <code>true</code> to enable vertical buttons layout</td>
      </tr>
      <tr>
        <td>onClick</td>
        <td>函数</td>
        <td></td>
        <td>可选. 回调函数将在用户点击任何Modal按钮后被触发执行. 它接收 <b>modal</b> (Modal的 HTML元素) 和 <b>index</b>作为参数 (被点击按钮的索引号)</td>
      </tr>
    </tbody>
  </table>
  <p class="component-description">让我们一起来看看按钮参数: </p>
  <table class="params-table">
    <thead>
      <tr>
        <th>参数</th>
        <th>类型</th>
        <th>默认值</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text</td>
        <td>字符串</td>
        <td></td>
        <td>按钮文本 (可以是 HTML 字符串)</td>
      </tr>
      <tr>
        <td>bold</td>
        <td>布尔值</td>
        <td>false</td>
        <td>可选. 设置为true会加粗按钮文本</td>
      </tr>
      <tr>
        <td>close</td>
        <td>布尔值</td>
        <td>true</td>
        <td>可选. 如果是“true”，点击这个按钮后modal会被关闭</td>
      </tr>
      <tr>
        <td>onClick</td>
        <td>函数</td>
        <td></td>
        <td>可选. 用户点击这个按钮后，回调函数会被执行</td>
      </tr>
    </tbody>
  </table>
  <p class="component-description">这样的配置选项允许我们创建灵活的modals。让我们来看一些例子 </p>
  <div class="component-example component-example-fullbleed">
    <div class="">
      <div class="content-block">
        <p><a href="#" class="open-3-modal">Modal With 3 Buttons</a></p>
        <p><a href="#" class="open-slider-modal">Modal With Slider</a></p>
        <p><a href="#" class="open-tabs-modal">Modal With Tabs</a></p>
        <p><a href="#" class="open-vertical-modal">Modal With Vertical Buttons</a></p>
      </div>
      <script type="text/javascript">
        $(document).on('click','.open-3-modal', function () {
          $.modal({
            title:  'Modal with 3 buttons',
            text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
            buttons: [
              {
                text: 'B1',
                onClick: function() {
                  $.alert('You clicked first button!')
                }
              },
              {
                text: 'B2',
                onClick: function() {
                  $.alert('You clicked second button!')
                }
              },
              {
                text: 'B3',
                bold: true,
                onClick: function() {
                  $.alert('You clicked third button!')
                }
              },
            ]
          })
        });
        $(document).on('click','.open-slider-modal', function () {
          var modal = $.modal({
            title: 'Awesome Photos?',
            text: 'What do you think about my photos?',
            afterText:  '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+
                          '<div class="swiper-pagination"></div>'+
                          '<div class="swiper-wrapper">'+
                            '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' +
                            '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+
                          '</div>'+
                        '</div>',
            buttons: [
              {
                text: 'Bad :('
              },
              {
                text: 'Awesome!',
                bold: true,
                onClick: function () {
                  $.alert('Thanks! I know you like it!')
                }
              },
            ]
          })
          $.swiper($$(modal).find('.swiper-container'), {pagination: '.swiper-pagination'});
        });

         $(document).on('click','.open-tabs-modal', function () {
          $.modal({
            title:  '<div class="buttons-row">'+
                      '<a href="#tab1" class="button active tab-link">Tab 1</a>'+
                      '<a href="#tab2" class="button tab-link">Tab 2</a>'+
                    '</div>',
            text: '<div class="tabs">'+
                    '<div class="tab active" id="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis nunc non dolor euismod feugiat. Sed at sapien nisl. Ut et tincidunt metus. Suspendisse nec risus vel sapien placerat tincidunt. Nunc pulvinar urna tortor.</div>'+
                    '<div class="tab" id="tab2">Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>'+
                  '</div>',
            buttons: [
              {
                text: 'Ok, got it',
                bold: true
              },
            ]
          })
        });

        $(document).on('click','.open-vertical-modal', function () {
          $.modal({
            title:  'Vertical Buttons Layout',
            text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
            verticalButtons: true,
            buttons: [
              {
                text: 'Button 1',
                onClick: function() {
                  $.alert('You clicked first button!')
                }
              },
              {
                text: 'Button 2',
                onClick: function() {
                  $.alert('You clicked second button!')
                }
              },
              {
                text: 'Button 3',
                onClick: function() {
                  $.alert('You clicked third button!')
                }
              },
            ]
          })
        });
      </script>
    </div>
  </div>
  {% highlight html %}
  <header class="bar bar-nav">
      <h1 class="title">自定义Modals</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-3-modal">Modal With 3 Buttons</a></p>
      <p><a href="#" class="open-slider-modal">Modal With Slider</a></p>
      <p><a href="#" class="open-tabs-modal">Modal With Tabs</a></p>
      <p><a href="#" class="open-vertical-modal">Modal With Vertical Buttons</a></p>
    </div>
  </div>
  ...
  {% endhighlight %}
  {% highlight js %}
  $(document).on('click','.open-3-modal', function () {
    $.modal({
      title:  'Modal with 3 buttons',
      text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
      buttons: [
        {
          text: 'B1',
          onClick: function() {
            $.alert('You clicked first button!')
          }
        },
        {
          text: 'B2',
          onClick: function() {
            $.alert('You clicked second button!')
          }
        },
        {
          text: 'B3',
          bold: true,
          onClick: function() {
            $.alert('You clicked third button!')
          }
        },
      ]
    })
    });
    $(document).on('click','.open-slider-modal', function () {
    var modal = $.modal({
      title: 'Awesome Photos?',
      text: 'What do you think about my photos?',
      afterText:  '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+
                    '<div class="swiper-pagination"></div>'+
                    '<div class="swiper-wrapper">'+
                      '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' +
                      '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+
                    '</div>'+
                  '</div>',
      buttons: [
        {
          text: 'Bad :('
        },
        {
          text: 'Awesome!',
          bold: true,
          onClick: function () {
            $.alert('Thanks! I know you like it!')
          }
        },
      ]
    })
    $.swiper($$(modal).find('.swiper-container'), {pagination: '.swiper-pagination'});
    });

    $(document).on('click','.open-tabs-modal', function () {
    $.modal({
      title:  '<div class="buttons-row">'+
                '<a href="#tab1" class="button active tab-link">Tab 1</a>'+
                '<a href="#tab2" class="button tab-link">Tab 2</a>'+
              '</div>',
      text: '<div class="tabs">'+
              '<div class="tab active" id="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis nunc non dolor euismod feugiat. Sed at sapien nisl. Ut et tincidunt metus. Suspendisse nec risus vel sapien placerat tincidunt. Nunc pulvinar urna tortor.</div>'+
              '<div class="tab" id="tab2">Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>'+
            '</div>',
      buttons: [
        {
          text: 'Ok, got it',
          bold: true
        },
      ]
    })
    });

    $(document).on('click','.open-vertical-modal', function () {
    $.modal({
      title:  'Vertical Buttons Layout',
      text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
      verticalButtons: true,
      buttons: [
        {
          text: 'Button 1',
          onClick: function() {
            $.alert('You clicked first button!')
          }
        },
        {
          text: 'Button 2',
          onClick: function() {
            $.alert('You clicked second button!')
          }
        },
        {
          text: 'Button 3',
          onClick: function() {
            $.alert('You clicked third button!')
          }
        },
      ]
    })
    });
  {% endhighlight %}
    <h3 class="component-title">用 JavaScript 关闭 Modals</h3>
    <p class="component-description">任何 Modal 可以用 JavaScript 来关闭，不仅仅是通过点击按钮。因此我们需要看看相关App方法：</p>
    <p class="component-description"><code>$.closeModal(modal)</code> - 关闭任意 modal</p>
    <ul>
      <li><code>modal - HTMLElement or string ( CSS 选择器)</code>. 可选. 除了指定的，任何被打开modal都将被关闭。</li>
    </ul>

</article>

<article class="component active" id='preloader'>
  <h2 class="component-title">带标题的加载指示器</h2>
  <p class="component-description">预加载 Modal 用来提示一些后台活动（像Ajax请求）和阻止在这个活动期间的任何用户操作。 打开预加载 modal 我们也需要调用适当的App方法: $.show预加载(<code>[title]</code>)- 显示 预加载 modal</p>
  <ul>
    <li><code>title  - string. Optional</code>. 预加载 modal 标题. 默认（没有指定）的时候，它等同于 "Loading...". 你可以在App初始化时通过 modal预加载Title 参数改变默认的 预加载 标题。</li>
  </ul>
  <p class="component-description">该方法返回动态创建的modal的HTML元素。</p>
  <p class="component-description">$.hide预加载() - 隐藏/关闭 预加载 modal. 因为 预加载 modal 没有任何按钮, 它应该用 JavaScript 来关闭</p>
  <div class="component-example component-example-fullbleed">
    <div class="">
      <div class="content-block">
        <p><a href="#" class="open-preloader">Open Preloader</a></p>
        <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
      </div>
      <script type="text/javascript">
        $(document).on('click', '.open-preloader', function () {
            $.showPreloader();
            setTimeout(function () {
                $.hidePreloader();
            }, 2000);
        });
        $(document).on('click','.open-preloader-title', function () {
            $.showPreloader('Custom Title')
            setTimeout(function () {
                $.hidePreloader();
            }, 2000);
        });
      </script>
    </div>
  </div>
  {% highlight html %}
  <header class="bar bar-nav">
    <h1 class="title">预加载 Modal (Preloader Modal)</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-preloader">Open Preloader</a></p>
      <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
    </div>
  </div>
  ...
  {% endhighlight %}
  {% highlight js %}
  $(document).on('click', '.open-preloader', function () {
    $.showPreloader();
    setTimeout(function () {
        $.hidePreloader();
    }, 2000);
  });
  $(document).on('click','.open-preloader-title', function () {
    $.showPreloader('Custom Title')
    setTimeout(function () {
        $.hidePreloader();
    }, 2000);
  });
  {% endhighlight %}
</article>

<article class="component active">
  <h3 class="component-title">迷你指示器</h3>
  <p class="component-description">如果你不需要用像预加载Modal这样如此大的modal 窗口去指示活动, 你可以使用简单并且小的指示器modal: </p>
  <p class="component-description">$.showIndicator() - 显示指示器 modal </p>
  <p class="component-description">$.hideIndicator() - 隐藏/关闭指示器 modal. 因为指示器modal没有任何按钮, 它需要用JavaScript来关闭 </p>
  <div class="component-example component-example-fullbleed">
    <div class="">
      <div class="content-block">
        <p><a href="#" class="open-indicator">Open Indicator</a></p>
      </div>
      <script type="text/javascript">
        $(document).on('click','.open-indicator', function () {
            $.showIndicator();
            setTimeout(function () {
                $.hideIndicator();
            }, 2000);
        });

      </script>
    </div>
  </div>
  {% highlight html %}
  <header class="bar bar-nav">
      <h1 class="title">指示器(indicator)</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-indicator">Open Indicator</a></p>
    </div>
  </div>
  ...
  {% endhighlight %}
  {% highlight js %}
  $(document).on('click','.open-indicator', function () {
      $.showIndicator();
      setTimeout(function () {
          $.hideIndicator();
      }, 2000);
  });
  {% endhighlight %}
</article>

<article class="component active" id='toast' data-url='toast'>
  <h2 class="component-title">toast</h2>
  <p class="component-description">toast是一种轻量的提示，在页面中间显示，并且会在2秒(默认值，可修改)之后自动消失。</p>
  <p>可以用来显示一些不会打断用户操作的提示。</p>

{% highlight html%}
/* msg{string}: toast内容
 * duration{number}：toast显示时间,默认2000
 * extraclass{string}：给toast根节点附加class，高度自定义属性，方便用户自行控制不同场景的样式。
 * 如果使用了第三个参数，请自行在业务css里添加extraclass对应的样式
 * /
{% endhighlight %}
{% highlight js %}
$.toast("操作失败");

$.toast('操作成功，正在跳转...', 2345, 'success top');

{% endhighlight %}
</article>
